<template>
	<view class="myCrystal u-skeleton">
		<u-navbar title="赠送宝石" :background="{
			'backgroundColor':'#fff'
		}" :is-fixed='true' :borderBottom="false" class="u-skeleton-rect">
		</u-navbar>
		<view class="top u-skeleton-rect" :style="{
			'background-image':`url(${$util.img('/static/img/grade/02.png')})`
		}">
			<view class="t-title">赠送{{$store.state.bs}}</view>
			<view class="t-tips">输入正确信息即可到账</view>
		</view>
		<view class="content">
			<view class="c-title">接收人</view>
			<view class="c-input">
				<input type="text" placeholder="请输入被接收人邀请码" v-model="code">
			</view>
			<view class="c-title">赠送数量</view>
			<view class="c-input">
				<input type="number" placeholder="请输入赠送数量" v-model="num" @input="change">
			</view>
			<view class="c-num">
				<image :src="$util.img('/static/img/card/宝石.png')" mode="widthFix"></image>
				<view class="num">{{parseFloat(bsDetail.balance).toFixed(6)}}</view>
			</view>
		</view>
		<view class="box-die">
			<view class="bd-title">额外销毁赠送数量的{{bsDetail.bs_rate}}%作为服务费</view>
			<view class="txt-tips" v-if="bsDetail">
				<text class="tt-left">赠送{{$store.state.bs}}数</text>
				<text class="tt-right">{{num}}</text>
			</view>
			<view class="txt-tips">
				<text class="tt-left">手续费</text>
				<text class="tt-right">{{bs_rate}}</text>
			</view>
			<view class="txt-tips">
				<text class="tt-left">合计</text>
				<text class="tt-right">{{amount}}</text>
			</view>
		</view>
		<u-button class="btn-primary u-skeleton-rect" @click="btn" ripple-bg-color="rgba(0,0,0,.4)"
			:ripple="true">确认赠送</u-button>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loding: true, //初始化骨架屏展示
				amount: 0,
				code: '', //赠送人的邀请码
				num: 0, //赠送人的宝石的数量
				bsDetail: {},
				bs_rate: 0 //需要多少手续费
			}
		},
		onShow() {
			this.getinfo();

		},
		methods: {
			change() {
				this.bs_rate = (this.num * this.bsDetail.bs_rate / 100).toFixed(2);
				this.amount = (parseFloat(this.bs_rate) + parseFloat(this.num)).toFixed(2)
			},
			async btn() {
				if(this.num.indexOf('-') != -1){
					uni.showToast({
						title:"赠送数量不能为负数",
						icon:'none'
					})
					return false;
				}
				let res = await this.$http.sendrequest({
					url: '/profile/transferGem',
					data: {
						code: this.code, //赠送人的邀请码
						num: this.num, //赠送人的宝石的数量
						fee: this.bs_rate
					}
				});
				this.$util.taost({
					title: res.msg,
					callback: v => {
						if (res.code == '0') this.getinfo();
					}
				})
			},
			//获取用户自己的信息
			async getinfo() {
				let boredApe = await this.$http.sendrequest({
					url: '/goods/flashcardConfig'
				});
				let bsDetail = await this.$http.sendrequest({
					url: '/profile/bsDetail'
				});
				this.bsDetail = bsDetail.data;
				this.loding = false;
				// this.amount = boredApe.data.amount;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myCrystal {
		.title-right {
			padding-right: 30rpx;
			font-size: 26rpx;
		}

		.top {
			width: 100%;
			height: 360rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 10% 50rpx 0;

			.t-title {
				font-size: 46rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
				color: #fff;
			}

			.t-tips {
				font-size: 26rpx;
				color: rgba(255, 255, 255, .6);
			}
		}

		.content {
			margin: -120rpx 30rpx 0;
			min-height: 400rpx;
			background: #fff;
			border-radius: 14rpx;
			padding: 40rpx 30rpx;

			.c-title {
				font-size: 26rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.c-input {
				display: flex;
				align-items: center;
				height: 80rpx;
				padding: 0 20rpx;
				border: 1rpx solid rgba(0, 0, 0, .4);
				border-radius: 6rpx;
				margin-bottom: 20rpx;

				input {
					font-size: 26rpx;
					width: 100%;
					height: 80%;
				}
			}

			.c-num {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-weight: bold;
				margin-top: 30rpx;

				image {
					width: 40rpx;
					margin-right: 20rpx;
				}
			}
		}

		.btn-primary {
			height: 96rpx;
			background: #292929;
			border-radius: 10rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			margin-top: 116rpx;
			width: calc(100% - 60rpx);
		}

		.box-die {
			margin: 30rpx;
			min-height: 200rpx;
			border-radius: 14rpx;
			background: #fff;
			padding: 30rpx;

			.bd-title {
				font-size: 28rpx;
				font-weight: bold;
				color: red;
				margin-bottom: 20rpx;
			}

			.txt-tips {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				font-weight: bold;

				.tt-right {
					color: red;
				}
			}

			.txt-tips:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>